<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>用户列表页面</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<base href="/"/>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="./css/signin.css" rel="stylesheet"/>
</head>
<body>
<div class="container-fluid">
    <!--        上面的按钮-->
    <div class="row">
        <div class="col-md-4 col-md-offset-8">
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#user-add">添加</button>
            <button type="button" class="btn btn-danger btn sm">批量删除</button>

        </div>

    </div>
    <div class="row">

        <div class="col-md-12">
            <table class="table table-hover">
                <tr>
                    <td>ID</td>
                    <td>用户名称</td>
                    <td>用户性别</td>
                    <td>用户年龄</td>
                    <td>用户存款</td>
                    <td>用户头像</td>
                    <td>操作</td>
                </tr>

                <tr th:each="userModel : ${list}">
                    <td th:text="${userModel.id}">ID</td>
                    <td th:text="${userModel.username}" >用户类别</td>
                    <td th:text="${userModel.sex}">商品名称</td>
                    <td th:text="${userModel.balance}">商品价格</td>
                    <td th:text="${userModel.age}">商品卖点</td>

                    <td>
                        <img src="/images/shop_cart.png"/>
                    </td>

                    <td>
                        <!--                            提供一个详情连接-->
                        <button type="button" class="btn btn-primary btn sm">修改</button>
                        <button type="button" class="btn btn-danger btn sm">删除</button>

                    </td>
                </tr>
            </table>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            当前第几页，总共有多少条记录，共多少页
        </div>

    </div>

    <div class="row">
        <div class="col-md-6">
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li>
                        <a href="#" aria-label="previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>

                    <li th:each="num : ${pageInfo.navigatepageNums}"
                        th:class="${pageInfo.pageNum == num ? 'active':''}">
<!--                        class="active" th:if="${pageInfo.pageNum == num}">-->
                        <a href="#" th:text="${num}">
                            1
                        </a>
                    </li>
<!--                    <li>-->
<!--                        <a href="#">-->
<!--                            2-->
<!--                        </a>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <a href="#">-->
<!--                            3-->
<!--                        </a>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <a href="#">-->
<!--                            4-->
<!--                        </a>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <a href="#">-->
<!--                            5-->
<!--                        </a>-->
<!--                    </li>-->
                    <li>
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>

                </ul>
            </nav>
        </div>

    </div>
</div>

<!--modal content 根据id 来取用并触发-->
<div class="modal fade" id="user-add" tabindex="-1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                添加用户
                <form class="form-horizontal" enctype="multipart/form-data" method="post" action="html/user/add" id="add-form">
                    <div class="form-group">
                        <div class="col-sm-10">
                            <label for="name">用户名称:</label>

                            <input type="text" class="form-control" id="name" name="name" placeholder="userName">
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-10">
                            <label for="typeId">用户性别:</label>

                            <input type="text" class="form-control" id="typeId" name="typeId" placeholder="Email">
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-10">
                            <label for="imagesFile">用户头像:</label>

                            <input type="file" id="imagesFile" name="imagesFile">
                        </div>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox"> Check me out
                        </label>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="saveUser">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
    $(function () {
        //为按钮绑定事件
        $("#add-btn").click(function () {
            $("#product-add").model({
                backdrop : 'static',
                keyboard : true
            });

        })

        $("#saveUser").click(function () {
            $("#add-form").submit();
        })
    })
</script>
</body>
</html>